<template>
  <div class="home">
    <div class="head" v-html="txt">
      <!-- <b>{{ txt }}</b> -->
    </div>
    <div class="middle">
      <el-upload
        class="upload-demo"
        action="http://127.0.0.1:8000/index/"
        :on-success="handlesuccess"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <div class="foot">
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="标定的文本"
          prop="text"
          :rules="[{ required: true, message: '文本不能为空' }]"
        >
          <el-input
            type="text"
            v-model="numberValidateForm.text"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormname">人名</el-button>
          <el-button type="primary" @click="submitFormdate">日期</el-button>
          <el-button type="primary" @click="submitFormcompany"
            >公司名称</el-button
          >
          <el-button type="primary" @click="submitFormmoney">金额</el-button>
          <el-button type="primary" @click="submitFormpercentage"
            >百分比</el-button
          >
          <el-button type="primary" @click="submitFormlocation">地址</el-button>
          <el-button type="primary" @click="submitFormduty">职务</el-button>
          <el-button class="anniu" type="primary"
            ><a :href="'http://127.0.0.1:8000/index/?ip=' + ip"
              >下载</a
            ></el-button
          >
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      test: "<b>www</b>",
      ip: "",
      fileList: [],
      txt: "",
      type: "",
      numberValidateForm: {
        text: "",
      },
    };
  },
  methods: {
    handlesuccess(response, file, fileList) {
      // console.log(response.ip, response.txt);
      this.txt = response.txt;
      this.ip = response.ip;
    },
    handleRemove(file, fileList) {
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "delete",
        params: {
          content: "ok",
          ip: this.ip,
        },
      })
        .then((response) => {
          this.txt = response.data;
        })
        .catch(() => {
          this.$notify({
            type: "error",
            title: "请求参数错误",
            duration: 3000,
          });
        });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitFormname() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入姓名",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "name",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormdate() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入日期",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "date",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormcompany() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入公司名称",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "company",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormmoney() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入金额",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "money",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormpercentage() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入百分比",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "percentage",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormlocation() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入地址",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "location",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        console.log(response);
        this.txt = response.data;
      });
    },
    submitFormduty() {
      if (!this.numberValidateForm.text)
        return this.$notify({
          title: "请输入职务",
          type: "error",
          duration: 1500,
        });
      this.$axios({
        url: this.$settings.base_url + "/index/",
        method: "put",
        params: {
          ip: this.ip,
          type: "duty",
          text: this.numberValidateForm.text,
        },
      }).then((response) => {
        this.txt = response.data;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.el-upload__input {
  display: none !important;
}
.head {
  height: 400px;
  width: 500px;
  background-color: white;
  text-align: center;
  margin: 0 auto; /*水平居中*/
  overflow-x: scroll;
  font-family: "Hiragino Sans GB";
  font-size: 16px;
}

.head b {
  color: red;
}
.middle {
  margin: 0 auto; /*水平居中*/
  height: 100px;
  width: 100px;
}
.foot {
  height: 400px;
  width: 900px;
  margin: 0 auto; /*水平居中*/
}
.anniu a {
  color: white;
}
.anniu a:hover {
  text-decoration: none;
  color: white;
}
</style>